昨天講了 transform，
今天來講跟他配合的 transform-origin。
先來講一下 transform-origin 的 keyword，x-offset-keyword：left、right、centery-offset-keyword：top、bottom、center
一般來說除了使用 keyword 之外，
也可以直接給他數值，
在 MDN 中就有範例是使用 px、cm 或是 %，
這個 origin，就是設定變形的起點，有點像是變形的中心，
一般沒有設定的話，預設是 center center，
拿旋轉來舉例，
沒有額外設定的話，都是以元件的中心做旋轉，
如果今天設定 transform-origin: left top，
就會以左上角為中心做旋轉，
附上 codepen，
也可以做到這種，從左邊出現，右邊消失的效果，
codepen
如果再搭配上 perspective 的話，能做的效果就更多了，
但我還沒有很熟 perspective，
等我比較掌握了再分享～
今天就先這樣啦～
我們明天見。
iThome鐵人賽
看影片追技術